[CSS] text-overflow 텍스트가 많은 경우 생략기호로 보여주기

글이 너무 긴 경우에 ... 기호로 표시하는 경우가 많습니다. 예를들어 게시글의 제목이 긴 경우에가 대표적입니다. ... 기호가 원래는 더 긴 제목을 가졌음을 암시해주죠. 그렇다면 이렇게 긴 글을 생략기호를 사용하여 보여주려면 어떻게 해야할까요?

# css 텍스트에 생략기호 사용하기

이처럼 긴 글을 한 줄로 나타내고 영역이 벗어나는 경우 생략기호로 바꾸는 방법이 무엇이 있을까요? 바로 css의 text-overflow 속성입니다. 간단한 문법은 아래와 같습니다.

text-overflow: ellipsis;

매우 간단합니다. 텍스트 형태의 요소에 적용하면 됩니다. 만약 css에 이 속성이 없다면? 자바스크립트를 사용하여 자리수만큼 잘라내고 영역을 계산해야할 지고 모릅니다.

이제 tet-overflow를적용하기 전과 적용 후의 차이를 알아보죠. 아래의 1번은 생략기호 속성이 적용되기 전의 문장이고 2번은 적용된 후의 경우입니다.

• 1) 동해물과 백두산이 마르고
• 2) 동해물과 백두산 ...

!! 우측의 ... 즉, 점점점 기호가 바로 안보이는 부분을 생략기호로써 표시한 부분입니다. 매우 유용하겠죠?

 text-overflow 좌측이 적용 전, 우측은 적용 후

위 예제와 같이 보여줄 수 있는 영역을 넘어서는 텍스트의 경우 잘리는 부분에 ... 으로 표시할 수 있게됩니다. 그럼 어떻게하면 이렇게 생략 표시를 사용하는지 예제를 통하여 구현해보겠습니다.



# text-overflow 실전 예제먼저 한 가지 사실을 알아야하는데 바로 text-overflow 속성을 사용하려면 몇 가지 과정이 필요합니다. 즉 몇 가지 조건이 만족되어야 동작하게되죠. 그렇지 않으면 생략 기호로 나타나지 읺을 수 있으므로 반드시 알아야합니다.

! text-overflow를 구현하기 위한 조건

그럼 어떤 조건들이 필요한지 알아보겠습니다. 아래의 내용이 바로 그것입니다.

i. width 또는 height가 고정적일 것
ii. overflow: hidden; 을 사용해 영역을 감출 것
iii. 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요

그럼 위 내용을 참고하여 예제 코드를 작성... 함께 알아보도록 하죠.

@ text-overflow.html

위의 코드는 html 코드입니다. 여기에 css를 사용해 고정된 width 100px을 넘을 경우에는 텍스트가 절리며 생략기호를 사용되도록 하려면?? 아래의 css를 적용합니다.

@ text-overflow.css

이제 위 코드는 어떻게 출력될 까요? 아래는 결과입니다.

여기까지 매우 간단한 예제를 알아보았습니다. 단순하게 text-overflow 속성만 지정하는 것이 아니므로 조금 복잡할 수 있을 것입니다.

# 마치면서. 알아두면 좋은 팁

text-overflow 속성은 display 속성이 블럭 형태인 경우에만 적용됩니다. 즉, inline의 경우는 적용되지 않습니다. 이를 적용하기 위해서는 반드시 아래와 같이 display를 block 또는 inline-block과 같이 설정해야만 적상적으로 작동합니다.

참고로, text-overflow 속성은 IE 6 이상부터 지원합니다.